<template>
  <div id="float-step" @mousedown="handleMousedown" @mouseup="handleMouseup" :style="{ top: top }"
    @mousemove="handleMousemove">
    <div class="step-wrap">
      <el-anchor direction="vertical" @click="handleClick" :bound="100" :offset="100" :container="join">
        <el-anchor-link class="step-item" :style="{ borderLeft: `1px solid ${getColor(index)}` }"
          v-for="(item, index) in list" :href="item.href" :key="item.key">
          <img :src="getStatusImage(item.status)" alt="" srcset="">
          <div class="label" :style="{ color: item.color }">{{ item.label }}</div>
        </el-anchor-link>
      </el-anchor>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ElAnchor, ElAnchorLink } from 'element-plus';
import 'element-plus/dist/index.css'
import { onMounted, ref, watch } from "vue";
const props = defineProps(['step', 'status', 'list'])
import { getImageUrl } from "@/assets/common/common.ts";

interface ListItem {
  label: string,
  status?: string | number,
  color?: string,
  href?: string,
  key?: string | number
}
const getStatusImage = (status) => {
  const map = {
    "1": "success",
    '2': "error",
    "3": "error",
    "4": "watting",
    "5": 'circle'
  }
  return getImageUrl(`${map[status]}.png`, 'applicationDetail')
}
const list = ref<ListItem[]>([

])
const join = ref<any>(null)
onMounted(() => {
  join.value = document.querySelector(".right-bottom");
  top.value = localStorage.getItem('top') || "50%"
})

const colorMap = {
  "1": "#16C716",
  "2": "#FF4242",
  "3": "#FF4242",
  "4": "#209ee4",
  "5": "#b3c0c8"
}
const doRender = (val) => {
  list.value = JSON.parse(JSON.stringify(props.list));
  list.value.forEach((el, idx) => {
    if (idx + 1 < props.step) {
      el.status = "1"
    } else if (idx + 1 == props.step) {
      el.status = props.status + ""
    } else {
      el.status = "5"
    }
    el.color = colorMap[el.status]
  })
}
watch(() => props.list, (val) => {
  if (val) {
    doRender(val)
  }
}, { deep: true, immediate: true })

watch(() => props.step, (val) => {
  if (val) {
    if (val) {
      doRender(val)
    }
  }
}, { immediate: true, deep: true })

watch(() => props.status, (val) => {
  if (val) {
    if (val) {
      doRender(val)
    }
  }
}, { immediate: true, deep: true })

const getColor = (idx) => {
  if (idx !== 3) {
    return list.value[idx + 1].color
  }
  return "none"
}
let flag = false;
const top = ref<string>("50%")
const handleClick = (e: MouseEvent) => {
  e.preventDefault();
};

const handleMousedown = (e) => {
  flag = true
}

const handleMouseup = (e) => {
  flag = false
  localStorage.setItem('top', top.value)
}

const handleMousemove = (e) => {
  if (flag) {
    top.value = e.y + 'px';
  }
}
</script>

<style lang="less" scoped>
:deep(.el-anchor__item) {
  overflow: unset;
}

:deep(.el-anchor__marker) {
  display: none;
}

:deep(.el-anchor__link) {
  .label {
    margin-top: -3px;
    font-size: 14px;
  }
}

#float-step {
  user-select: none;
  position: fixed;
  width: 134px;
  height: 210px;
  background: #FFFFFF;
  box-shadow: 0px 0px 14px 0px rgba(4, 50, 75, 0.3);
  border-radius: 4px 4px 4px 4px;
  right: 10px;
  overflow: hidden;

  transform: translateY(-50%);
  padding: 20px;
  box-sizing: border-box;

  .step-item {
    height: 50px;
    border-left: 1px solid #16C716;
    position: relative;
    padding-left: 20px;
    box-sizing: border-box;

    &:last-child {
      border: none;
    }

    img {
      width: 24px;
      height: 24px;
      position: absolute;
      top: 0px;
      left: -12.5px;
      background: #fff;
      z-index: 99;
    }

  }
}
</style>